<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <LeiSlider title="排产计划搜索" />
      <div class="project_search">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="所属范围" required>
            <el-select v-model="form.levelVal" placeholder="选择部门">
              <el-option
                v-for="item in form.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目名称">
            <el-input
              v-model="form.projectName"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划编号">
            <el-input
              v-model="form.projectNo"
              placeholder="请输入计划编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="计划类别">
            <el-select v-model="form.projectVal" placeholder="请选择计划类别">
              <el-option
                v-for="item in form.projectList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="form.startTime"
              type="datetime"
              placeholder="请选择开始时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="请选择结束时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <LeiFooter @reset-form="resetForm" />
      </div>
      <LeiSlider title="排产计划管理" />
      <lei-table
        :tableData="tableData"
        :columns="columns"
        :pageObj="pageObj"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        clear
        del
        :select="true"
      >
        <el-table-column slot="palnStatus" label="计划状态" align="center">
          <template slot-scope="scope">
            <el-button type="default">默认</el-button>
            <el-button type="primary">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column slot="status" label="生产状态" align="center">
          <template slot-scope="scope">
            <el-button type="default">默认</el-button>
            <el-button type="primary">设置</el-button>
          </template>
        </el-table-column>
        <el-table-column slot="operation" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="default">默认</el-button>
            <el-button type="primary">设置</el-button>
          </template>
        </el-table-column>
      </lei-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: {
        path: '',
        title: '排产管理',
      },

      form: {
        projectName: '',
        projectNo: '',
        levelVal: '',
        options: [
          {
            value: '选项1',
            label: '黄金糕',
          },
          {
            value: '选项2',
            label: '双皮奶',
          },
          {
            value: '选项3',
            label: '蚵仔煎',
          },
          {
            value: '选项4',
            label: '龙须面',
          },
          {
            value: '选项5',
            label: '北京烤鸭',
          },
        ],
        projectVal: '',
        projectList: [
          { label: 'PC', id: 0 },
          { label: '钢结构', id: 1 },
        ],
        startTime: '',
        endTime: '',
      },

      pageObj: {
        pageNum: 1,
        pageSize: 10,
        total: 100,
      },
      tableData: [],
      columns: [
        { label: '排产计划名称', prop: 'name' },
        { label: '计划编号', prop: 'age' },
        { label: '构建数量', prop: 'sex' },
        { slot: 'palnStatus' },
        { slot: 'status' },
        { label: '异常/警告', prop: 'hobby' },
        { label: '添加人员', prop: 'hobby' },
        { label: '更新时间', prop: 'hobby' },
        { label: '备注信息', prop: 'hobby' },
        { slot: 'operation' },
      ],
    }
  },
  methods: {
    // 重置
    resetForm() {
      this.form = {}
    },

    handleSizeChange(val) {
      this.pageObj.pageNum = 1
      console.log('页码大小发生变化', val)
    },
    handleCurrentChange(val) {
      console.log('当前页码大小发生变化', val)
    },
  },
}
</script>